<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
</head>

<body>


    <script>
        var vm = new Vue({
            data: {
                firstName: 'Han',
                lastName: '56',
                fullName: ''
            },
            watch: {
                firstName:{
                    handler(newName,oldName){
                        console.log('new firstName:%s,ole firstName:%s',newName,oldName);
                    },
                    immediate: true
                }
                // firstName:function(newName,oldName){
                //     console.log('new firstName:%s,ole firstName:%s',newName,oldName);
                // }
            },
            methods: {

            }
        })
        vm.firstName = 'han56',
        vm.lastName = '233',
        vm.fullName = vm.firstName+vm.lastName;

    </script>

</body>

</html>